<template>
  <div id="app" @click="clickBox">

  </div>
</template>

<script>
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  Mesh,
  BoxGeometry,
  MeshBasicMaterial,
  Raycaster,
  Vector2,
} from 'three';

import { OrbitControls } from '@/lib/OrbitControls';

export default {
  name: 'App',
  components: {},
  mounted() {
    let scene = new Scene();
    let camera = new PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    let renderer = new WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    let app = document.getElementById('app');
    app.appendChild(renderer.domElement);

    //加载场景控制插件
    let controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.enableZoom = true;
    controls.autoRotate = false;
    controls.autoRotateSpeed = 3;
    controls.enablePan = true;
    controls.enableKeys = true;
    controls.keyPanSpeed = 7;
    controls.keys = {
      LEFT: 37,
      UP: 38,
      RIGHT: 39,
      BOTTOM: 40,
    };
    this.controls = controls;

    this.createBox(scene);
    this.createBox(scene);
    this.createBox(scene);

    camera.position.z = 5;

    this.camera = camera;
    this.scene = scene;

    //渲染场景
    let animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();
  },

  methods: {
    //生成随机盒子模型
    createBox(scene) {
      let geometry = new BoxGeometry();
      let material = new MeshBasicMaterial({ color: 0x00ff00 });
      let cube = new Mesh(geometry, material);
      cube.position.x = Math.random() * 6 - 3;
      cube.position.y = Math.random() * 6 - 3;
      scene.add(cube);
    },
    clickBox(event) {
      console.log(Math.random().toString(16));
      let raycaster = new Raycaster();
      let mouse = new Vector2();
      console.log(this.scene.children);
      //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = 1 - (event.clientY / window.innerHeight) * 2;
      console.log(mouse);
      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
      raycaster.setFromCamera(mouse, this.camera);

      // 获取raycaster直线和所有模型相交的数组集合
      var intersects = raycaster.intersectObjects(this.scene.children);
      console.log(intersects);

      //将所有的相交的模型的颜色设置为红色
      for (var i = 0; i < intersects.length; i++) {
        intersects[i].object.material.color.set(0xff0000);
      }
    },
  },
};
</script>

<style>
#app {
}

body,
html {
  margin: 0;
  padding: 0;
}
</style>
